/*
 * @Description: 
 * @Author: 葛玉根
 * @Date: 2021-02-25 17:44:27
 * @LastEditTime: 2021-02-27 08:20:43
 * @LastEditors: Zhang Zhaoda
 */
import { FC, useEffect } from "react"
import style from '../css/index.module.scss'
import { bindActionCreators } from 'redux'
import { useDispatch, useSelector } from 'react-redux'
import * as allDis from '../../../store/actions/imgActions'
import { stateType } from '../../../store/reducers/imgReducer'
import LazyLoad from 'react-lazyload';
import Swiper from "swiper"
import 'swiper/css/swiper.css'
interface Iprops {
    swIndex: number,
}
interface reducerName {
    imgReducer: stateType
}
let SwiperImg: FC<Iprops> = function (props) {
    const { getSwData } = useSelector((reducers: reducerName) => reducers.imgReducer)
    const dispatch = useDispatch()
    const dis = bindActionCreators(allDis, dispatch)
    useEffect(() => {
        new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            initialSlide: props.swIndex,
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
        })
    }, [getSwData])
    const allFlagClick = () => {
        dis.swFlag(false)
    }
    return <div className={`${style.sanDiv} animate__animated animate__backInUp`} onClick={allFlagClick}>
        <div className="swiper-container">
            <div className="swiper-wrapper">
                {
                    getSwData.map((item, index) => {
                        return <div className="swiper-slide" key={item.Url + 'a' + index}>
                            <LazyLoad height={200}>
                                <img src={item.Url.replace("{0}", "3")} alt="" />
                            </LazyLoad>
                        </div>
                    })
                }
            </div>
            <div className="swiper-pagination"></div>
        </div>
        <div>
            <button className={style.money}>询问低价</button>
        </div>
    </div>

}
export default SwiperImg
